<template>
	<view>
		<view class="projectBox">
			<view class="projectTop">
				<view class="projectName">
					{{ projectName }}
				</view>
				<view class="projectYear">
					{{ timeData }}/{{ weekData[weekIndex] }}
				</view>
			</view>
			<view class="projectTime">
				<u-tabs :current="current" :list="timeList" @click="clickTime"></u-tabs>
			</view>
		</view>

		<view class="CalmBox">
			<view class="timeCalmBox">
				<view v-for="(item,index) in timeCalm" :key="index">
					<view class="CalmBoxLeft">
						<view class="">
							{{ item[0] }}
						</view>
						<view class="">
							{{ item[1] }}
						</view>
					</view>

				</view>
			</view>

			<view class="predetermine">
				<view class="predetermineList">
					<view v-for="(item,index) in tableData" :key="index" class="predetermineItem"
						@click="imgShowData = item,imgShow = true">
						{{ item.name }}
					</view>
				</view>

				<view class="predetermineTime">
					<view v-for="lengthIndex in timePlace.length" :key="lengthIndex" class="">
						<view class="CalmBoxRightBox">


							<view v-for="(params,parIndex) in timePlace[lengthIndex ]" :key="parIndex"
								class="CalmBoxRight">
								<view v-if="params.status == 1 " class="CalmBoxRightItem" style="background:#d7d7d7;">

								</view>
								<view v-else-if="params.status == 63" class="CalmBoxRightItem"
									style="background:#f59a23;" @click="bookEvent(params)">
									{{ params.price / 100 }}
								</view>
								<view v-else class="CalmBoxRightItem" style="background:#95f204;"
									@click="bookEvent(params)">
									{{ params.price / 100 }}
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>


		</view>
		<view class="typeBox">
			<view class="typeItem">
				<view class="typePiece" style="background: #95f204;">
				</view>
				<view class="">
					可选
				</view>
			</view>
			<view class="typeItem">
				<view class="typePiece" style="background: #f59a23;">
				</view>
				<view class="">
					已选/已预定
				</view>
			</view>
			<view class="typeItem">
				<view class="typePiece" style="background: #d7d7d7;">
				</view>
				<view class="">
					已订满/不可订
				</view>
			</view>
		</view>
		<view class="selectBox">
			<view class="selectTitle">
				已选({{selectList.length}})
			</view>
			<view class="selectParams">
				<view v-for="(item,index) in selectList" :key="index" class="selectItem">
					<view class="itemLeft">
						<view class="">
							{{ item.areaName }}
						</view>
						<view class="">
							{{ item.day }}/{{ item.range }}
						</view>
					</view>
					<view class="itemRight">
						￥{{ item.price / 100 }}
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="fixedBox">
			<view class="payBox">
				<view class="payLeft">
					￥{{ payData / 100 }}
				</view>
				<view class="payRight" @click="bookClick">
					预订
				</view>
			</view>
		</view>

		<u-popup :closeable="true" :show="imgShow" mode="center" @close="imgShow = false">
			<view class="imgShowBox">
				<view class="name">
					{{ imgShowData.name }}
				</view>
				<view class="specification">
					场地规格:{{ imgShowData.specification }}
				</view>
				<image :src="imgShowData.img" class="img" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		dateReserves,
		initOrder,
		getSign
	} from "@/api/challenge";

	export default {
		data() {
			return {
				imgShowData: {},
				imgShow: false,
				current: 0,
				currentBoole: false,
				projectName: '',
				timeList: [],
				timeData: '',
				weekData: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				weekIndex: 0,
				tel: '',
				tableData: [],
				timeCalm: [],
				timePlace: [],
				selectList: [],
				selectIndex: [],
				payData: 0,
				venueId: "",
				dictIdType: "",
			}
		},
		onLoad(data) {
		
			this.projectName = data.name
			this.timeData = data.time
			this.timeList = JSON.parse(data.timeList)
			this.current = data.current
			this.tel = uni.getStorageSync('userinfo').phone
			this.venueId = data.venueId
			this.dictIdType = data.dictIdType
		},
		onShow() {
			this.dateReservesevent()
		},
		methods: {
			dateReservesevent() {
				uni.showLoading({
					title: '加载中'
				});
				dateReserves({
					venueId: this.venueId,
					dictIdType: this.dictIdType,
					date:this.timeData,
					tel: this.tel
				}).then(res => {
					uni.hideLoading();
					
					this.tableData = res.venueAreas
					for (let key in res.reservations) {

						if (this.currentBoole == false) {
							if (key == this.timeData) {

								this.currentBoole = true
							} else {
								this.current += 1
							}
						}
					}

					this.weekEvent(this.timeData)
					this.timeCalm = []
					this.timePlace = []

					for (let key in res.reservations[this.timeData]) {
						this.timeCalm.push(key.split('-'))
						res.reservations[this.timeData][key].forEach(item=>{
							if(this.selectIndex.indexOf(item.key) != -1){
								item.status = 63
							}
						})
						this.timePlace.push(res.reservations[this.timeData][key])
					}
					
				})
			},
			
			bookClick() {
				uni.showLoading({
					title: '加载中'
				});
				var that = this
				if (this.selectList.length > 0) {
					var venueSelects = []

					this.selectList.forEach(item => {
						venueSelects.push({
							ruleId: item.ruleId,
							dateId: item.dateId
						})


					})

					initOrder({
						tel: that.tel,
						venueSelects: venueSelects,
						appId: "wx5b3843197d34d53b" //聚力
					}).then(res => {
						uni.hideLoading();
						
						uni.navigateTo({
							url: '/subpackageOne/venueRelated/venuePay/venuePay?orderSn=' + res.orderSn +
								'&type=0'
						})

					})
				} else {
					uni.$u.toast('请选择预定的场地');
				}
			},
			bookEvent(data) {
				if (data.status == 63) {
					var index = this.selectIndex.indexOf(data.key)
					if (index != -1) {
						data.status = 0
						this.payData -= data.price
						this.selectIndex.splice(index, 1)
						this.selectList.splice(index, 1)
					}
				} else {

					data.status = 63
					this.payData += data.price
					this.selectIndex.push(data.key)
					this.selectList.push(data)
				}
				
			},
			clickTime(item) {
				this.timeData = item.timeData
				this.weekEvent(item.timeData)
				this.dateReservesevent()
			},
			weekEvent(data) {
				var data = new Date(data)
				this.weekIndex = data.getDay()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.projectBox {
		.projectTop {
			padding: 10rpx 20rpx 0 20rpx;
			display: flex;

			.projectName {
				margin-right: 20rpx;
			}

			.projectYear {}
		}

		.projectTime {
			flex: 1;
		}
	}


	.CalmBox {
		display: flex;

		margin: 10rpx 0;

		.timeCalmBox {
			display: flex;
			flex-direction: column;
			margin-top: 110rpx;

			.CalmBoxLeft {
				width: 100rpx;
				height: 90rpx;
				text-align: right;
				margin: 4rpx 0;
				padding-top: 10rpx;
			}
		}

		.predetermine {

			// overflow: auto hidden;
			// display: flex;
			.predetermineList {
				display: flex;

				.predetermineItem {
					font-size: 28rpx;
					width: 100rpx;
					height: 90rpx;
					margin: 10rpx 4rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}


			.predetermineTime {
				display: flex;
				flex-direction: column;

				.CalmBoxRightBox {
					display: flex;

					.CalmBoxRight {
						.CalmBoxRightItem {
							width: 100rpx;
							height: 100rpx;
							margin: 4rpx;
							text-align: center;
							line-height: 100rpx;
						}
					}
				}
			}


		}


	}

	.typeBox {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;

		.typeItem {
			display: flex;
			align-items: center;

			.typePiece {
				width: 34rpx;
				height: 34rpx;
				background-color: aqua;
				margin-right: 10rpx;
			}
		}
	}

	.selectBox {
		margin: 40rpx 10rpx;
		padding: 20rpx;
		box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.24);

		.selectTitle {
			font-size: 40rpx;
			font-weight: 600;
		}

		.selectParams {
			.selectItem {
				display: flex;
				align-items: center;
				padding: 30rpx 10rpx;
				border-bottom: 2rpx solid #d7d7d7;

				.itemLeft {
					width: 70%;
				}

				.itemRight {
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
	}

	.fixedBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 9999;
		background-color: #ffffff;
	}

	.payBox {
		// margin: 40rpx 10rpx;
		padding: 20rpx;
		box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.24);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.payLeft {
			font-size: 38rpx;
			font-weight: 600;
			color: #d9001b;
		}

		.payRight {
			padding: 10rpx 90rpx;
			background-color: #169bd5;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.imgShowBox {
		padding: 60rpx 0 30rpx 0;
		width: 680rpx;
		// height: 300rpx;
		text-align: center;

		.name {
			font-size: 42rpx;
			font-weight: 600;
		}

		.specification {
			margin: 20rpx 0 10rpx 0;
		}

		.img {
			width: 80%;
		}
	}
</style>